<template>
  <div class="container">
    <el-row class="info">
      <el-col :span="3" class="avatar">
        <el-avatar :src="avatar" :size="100"/>
        <el-button size="default" circle>
          <ant-CameraTwoTone/>
        </el-button>
      </el-col>
      <el-col :span="5">
        <el-descriptions size="default" :column="1">
          <el-descriptions-item label="用户名:">{{ name }}</el-descriptions-item>
          <el-descriptions-item label="账号ID:">
            {{ userId }}
          </el-descriptions-item>

          <el-descriptions-item label="注册时间:">2025-10-10</el-descriptions-item>
        </el-descriptions>
      </el-col>

      <el-col :span="5">
        <el-descriptions size="default" :column="1">
          <el-descriptions-item label="实名认证:">
            <el-button style="cursor: default" type="success" size="small">已认证</el-button>
            <el-button type="text" size="large">修改</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="手机号码:">
            {{ phone }}
            <el-button type="text" size="large">修改</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row class="update-info">
      <el-tabs type="card" class="demo-tabs">
        <el-tab-pane label="基础信息" name="first">
          <el-form class="basic-info" label-position="right" label-width="100px">
            <el-form-item label="邮箱">
              <el-input placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="国家/地区">
              <el-select placeholder="请选择"></el-select>
            </el-form-item>
            <el-form-item label="所在区域">
              <el-select placeholder="请选择"></el-select>
            </el-form-item>
            <el-form-item label="具体地址">
              <el-input placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="个人简介">
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                resize="none"
                show-word-limit
                maxlength="500"
              />
            </el-form-item>
            <el-form-item style="margin-top: 40px">
              <el-button color="#1f63ff" type="primary" size="default" style="border-radius: 5px">
                修改
              </el-button>
              <el-button type="default" size="default" style="border-radius: 5px">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="安全设置" name="second">安全设置</el-tab-pane>
        <el-tab-pane label="实名认证" name="third">实名认证</el-tab-pane>

      </el-tabs>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {useTokenStore} from "@/stores/useTokenStore.ts";
import {storeToRefs} from "pinia";

const {avatar,name,userId,phone} = storeToRefs(useTokenStore())
</script>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  flex-direction: column;

  //顶部信息栏
  .info {
    width: 100%;
    height: 160px;
    min-height: 160px;
    align-items: center;
    background-color: $base-card-bg-color;
    padding-left: 20px;

    .avatar {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      //上传按钮
      .el-button {
        position: relative;
        top: -20px;
        left: 70px;
        z-index: 1;
      }
    }
  }

  .update-info {
    margin: 16px 0 24px;
    width: 100%;
    flex-grow: 1;
    min-height: 584px;
    background-color: $base-card-bg-color;


    //标签
    .demo-tabs {
      margin-left: 20px;
      width: 100%;

      .basic-info {
        margin: 20px 0 0 134px;
        width: 400px;


        :deep(.el-input__wrapper) {
          background-color: #f7f8fa;
        }

        :deep(.el-select__wrapper) {
          background-color: #f7f8fa;
        }

        :deep(.el-textarea__inner){
          background-color: #f7f8fa;
        }
      }

      :deep(.el-tabs__header) {
        border: none;
      }


      :deep(      .el-tabs__nav) {
        border: none;
      }

      :deep( .el-tabs__item) {
        height: 30px;
        margin-right: 20px;
        border-radius: 20px;
        border: none;

        &.is-active {
          color: #3371ff;
          background-color: #f2f3f8;
        }
      }
    }
  }

}

</style>
